<template>
   <div class="qtlist">
       <h4>销售用户列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;display:flex; justify-content: space-between;">
                
                 <el-button type="primary"  size="small" 
                    @click="addSeller()">新增</el-button>
                    <div>
                        <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                            销售人员：
                            <el-input clearable
                                v-model="realName" class="filter-input"
                                @keyup.enter.native="search_trans()">
                            </el-input>
                        </div>
                       <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                                手机号：
                                <el-input clearable 
                                    v-model="saleManTel" class="filter-input"
                                    @keyup.enter.native="search_trans()">
                                </el-input>
                        </div>
                        <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;">
                                邀请码：
                                <el-input clearable 
                                    v-model="inviteCode" style="width:100px;"
                                    @keyup.enter.native="search_trans()">
                                </el-input>
                        </div>
                         <el-button type="primary" @click="search_trans()">搜索</el-button>
                        </div>
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <el-table  v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                 <el-table-column prop="department" label="部门" width="140" align="center">
                </el-table-column>
                <el-table-column prop="title" label="职务" width="180" align="center"></el-table-column>
                <el-table-column prop="realName" label="姓名" align="center" width="140">
                </el-table-column>
                <el-table-column prop="tel" label="手机号" align="center" width="140">
                </el-table-column>
                <el-table-column prop="inviteCode" label="邀请码" align="center" width="140">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="lookDetail(scope.row)">编辑</el-button>
                    <el-button size="mini" type="warning" @click="handleEdit(scope.row.id,scope.row.isDeleted)">{{scope.row.isDeleted == 0 ? '启用':'禁用'}}</el-button>
                    <el-button size="mini" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                                @current-change="getPageNum">
                </el-pagination>
            </div>
      </div>
      <!-- 是新增销售员还是编辑销售员信息 -->
      <el-dialog  :title="sellerInfo.isEdit ? '编辑销售员信息':'新增销售员信息'"  :visible.sync="dialogFormVisible" width="40%" top="18vh">
            <el-form :model="sellerInfo" :rules="rules" ref="sellerInfoForm">
                <el-form-item prop="department" label="部门" :label-width="formLabelWidth">
                       <el-input v-model="sellerInfo.department" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
               <el-form-item prop="title" label="职务" :label-width="formLabelWidth">
                       <el-input v-model="sellerInfo.title" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item prop="realName" label="姓名" :label-width="formLabelWidth">
                       <el-input v-model="sellerInfo.realName"  auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item prop="tel" label="手机号" :label-width="formLabelWidth">
                       <el-input v-model="sellerInfo.tel" maxlength="11" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item prop="inviteCode" label="邀请码" :label-width="formLabelWidth">
                       <el-input v-model="sellerInfo.inviteCode" 
                                 placeholder="请输入英文或数字"
                                 maxlength="6" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
                <!-- <el-form-item prop="inviteCode" label="负责区域" :label-width="formLabelWidth">
                         <el-select v-model="value1" placeholder="请选择省">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                            <el-select v-model="value1" placeholder="请选择市">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancal('sellerInfoForm') ">取 消</el-button>
                <el-button type="primary" @click="saveSellerInfo('sellerInfoForm')">保存</el-button>
            </div>
     </el-dialog>
  </div>  
</template>

<script>
import { sellerList,addSeller,editSeller,sellerStatus,delSeller } from '@/request/api'
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        return {
            loading:true,
            data:[],
            total:0,
            pageSize:10,
            pageNum:1,
            realName:'',
            saleManTel:'',
            inviteCode:'',
            sellerInfo:{
                isEdit:false,
                id:'',
                department:'',
                title:'',
                realName:'',
                tel:'',
                inviteCode:''
            },
            dialogFormVisible:false,
            formLabelWidth: '120px',
            rules:{
                department: [
                    { required: true, message: '部门不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                title: [
                     { required: true, message: '职务不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                realName: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                tel: [
                    {  required: true, message: '手机号不能为空', trigger: 'blur' },
                    { pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[89])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                  
                ],
                inviteCode: [
                    {  required: true, message: '邀请码不能为空', trigger: 'blur' },
                    {pattern:/^[A-Za-z0-9]+$/, message: '请输入正确的邀请码', trigger: 'blur'}
                ]
            },
            options: [{
                    value: '选项1',
                    label: '黄金糕'
                    }, {
                    value: '选项2',
                    label: '双皮奶'
                    }, {
                    value: '选项3',
                    label: '蚵仔煎'
                    }, {
                    value: '选项4',
                    label: '龙须面'
                    }, {
                    value: '选项5',
                    label: '北京烤鸭'
            }],
            value1:'',
        }
    },
    created(){
        this.get_sellerList();
    },
    methods:{
      search_trans(){
         this.get_sellerList();
      },
      getPageNum(e){
          this.pageNum = e;
          this.get_sellerList();
      },
      //  新增销售人员
      addSeller(){
          this.sellerInfo.isEdit = false;
          this.dialogFormVisible = true;
      },
      saveSellerInfo(formName){
            this.$refs[formName].validate( (valid)=> {
                 if(valid) {
                     if( this.sellerInfo.isEdit ) {
                        //  编辑
                        editSeller({
                            id:this.sellerInfo.id,
                            department:this.sellerInfo.department,
                            title:this.sellerInfo.title,
                            realName:this.sellerInfo.realName,
                            tel:this.sellerInfo.tel,
                            inviteCode: this.sellerInfo.inviteCode
                        }).then(res => {
                            if(res.code == 1) {
                                this.$message.success('编辑成功');
                                this.$refs[formName].resetFields();
                                this.dialogFormVisible = false;
                                this.sellerInfo.isEdit = false;
                                this.sellerInfo.id = '';
                                this.sellerInfo.department = '';
                                this.sellerInfo.realName= '';
                                this.sellerInfo.tel = '';
                                this.sellerInfo.inviteCode = '';
                                this.sellerInfo.title ='';
                                this.get_sellerList();
                            }
                            if(res.code == 2) {
                                this.$message.warning('邀请码已存在，请重新输入');
                                this.sellerInfo.inviteCode = '';
                            }
                            if(res.code == 3) {
                                this.sellerInfo.tel = '';
                                this.$message.warning('手机号已存在，请重新输入'); 
                                 
                            }
                            if( res.code == 6 ) {
                                this.sellerInfo.inviteCode = '';
                                this.$message.warning('邀请码已被使用不能编辑'); 
                            }
                        })
                     }else {

                        //  新增
                       addSeller({
                            department:this.sellerInfo.department,
                            title:this.sellerInfo.title,
                            realName:this.sellerInfo.realName,
                            tel:this.sellerInfo.tel,
                            inviteCode: this.sellerInfo.inviteCode
                        }).then(res => {
                            if(res.code == 1) {
                                this.$message.success('新增成功');
                                this.dialogFormVisible = false;
                                this.sellerInfo.isEdit = false;
                                this.sellerInfo.id = '';
                                this.sellerInfo.department = '';
                                this.sellerInfo.realName= '';
                                this.sellerInfo.tel = '';
                                this.sellerInfo.inviteCode = '';
                                this.sellerInfo.title ='';
                                this.get_sellerList();
                            }
                            if(res.code == 2) {
                                this.sellerInfo.inviteCode = '';
                                this.$message.warning('邀请码已存在，请重新输入');
                            }
                            if(res.code == 3) {
                                this.sellerInfo.tel = '';
                                this.$message.warning('手机号已存在，请重新输入'); 
                            }
                        })
                     }
                     
                 }
            })
      },
      cancal(formName ){
         this.dialogFormVisible = !this.dialogFormVisible;
        // this.$refs[formName].validate( (valid)=> {
        //          if(valid) {
        //              if( this.sellerInfo.isEdit ) {
        //                  //编辑
        //                 editSeller({
        //                     id:this.sellerInfo.id,
        //                     department:this.sellerInfo.department,
        //                     title:this.sellerInfo.title,
        //                     realName:this.sellerInfo.realName,
        //                     tel:this.sellerInfo.tel,
        //                     inviteCode: this.sellerInfo.inviteCode
        //                 }).then(res => {
        //                     if(res.code == 1) {
        //                         this.$message.success('编辑成功');
        //                         this.$refs[formName].resetFields();
        //                         this.dialogFormVisible = true;
        //                         this.sellerInfo.isEdit = false;
        //                         this.sellerInfo.id = '';
        //                         this.sellerInfo.department = '';
        //                         this.sellerInfo.realName= '';
        //                         this.sellerInfo.tel = '';
        //                         this.sellerInfo.inviteCode = '';
        //                         this.sellerInfo.title ='';
        //                         this.get_sellerList();
        //                     }
        //                     if(res.code == 2) {
        //                         this.$message.warning('邀请码已存在，请重新输入');
        //                         this.sellerInfo.inviteCode = '';
        //                     }
        //                     if(res.code == 3) {
        //                         this.sellerInfo.tel = '';
        //                         this.$message.warning('手机号已存在，请重新输入'); 
                                 
        //                     }
        //                     if( res.code == 6 ) {
        //                         this.sellerInfo.inviteCode = '';
        //                         this.$message.warning('邀请码已被使用不能编辑'); 
        //                     }
        //                 })
        //              }else {

        //                 //  新增
        //                addSeller({
        //                     department:this.sellerInfo.department,
        //                     title:this.sellerInfo.title,
        //                     realName:this.sellerInfo.realName,
        //                     tel:this.sellerInfo.tel,
        //                     inviteCode: this.sellerInfo.inviteCode
        //                 }).then(res => {
        //                     if(res.code == 1) {
        //                         this.$message.success('新增成功');
        //                         this.dialogFormVisible = true;
        //                         this.sellerInfo.isEdit = false;
        //                         this.sellerInfo.id = '';
        //                         this.sellerInfo.department = '';
        //                         this.sellerInfo.realName= '';
        //                         this.sellerInfo.tel = '';
        //                         this.sellerInfo.inviteCode = '';
        //                         this.sellerInfo.title ='';
        //                         this.get_sellerList();
        //                     }
        //                     if(res.code == 2) {
        //                         this.sellerInfo.inviteCode = '';
        //                         this.$message.warning('邀请码已存在，请重新输入');
        //                     }
        //                     if(res.code == 3) {
        //                         this.sellerInfo.tel = '';
        //                         this.$message.warning('手机号已存在，请重新输入'); 
        //                     }
        //                 })
        //              }
                     
        //          }
        // })

      },
      // 编辑
      lookDetail(obj){
            this.sellerInfo.isEdit = true;
            this.sellerInfo.id = obj.id;
            this.sellerInfo.department = obj.department;
            this.sellerInfo.realName= obj.realName;
            this.sellerInfo.tel = obj.tel;
            this.sellerInfo.inviteCode = obj.inviteCode;
            this.sellerInfo.title = obj.title;

            this.dialogFormVisible = true;
      },
     //  禁用 启用 
      handleEdit(id,status){
         let info = status == 0 ? '确认禁用吗' :'确认启用吗';
         let msg =  status == 0 ? '禁用成功' :'启用成功';
         let cancelMsg = status == 0 ? '已取消禁用' :'已取消禁用启用';
         this.$confirm(info, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
              sellerStatus({
                   saleManId:id
               }).then(res => {
                    if(res.code ==1) {
                         this.get_sellerList();
                         this.$message({
                            type: 'success',
                            message: msg
                        }); 
                    }
              })
            
         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: cancelMsg
              });  
         }) 
      },
     //  删除
      handleDel(id){
         this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delSeller({
                 saleManId:id
             }).then(res => {
                 console.log(res);
                 if(res.code ==1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.get_sellerList()
                 }
                 if(res.code ==2) {
                     this.$message({
                        type: 'info',
                        message: '邀请码正在使用中,暂不能删除'
                     });
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
      get_sellerList(){
          sellerList({
             realName:this.realName,
             saleManTel:this.saleManTel,
             inviteCode:this.inviteCode,
             pageSize:this.pageSize,
             pageNum:this.pageNum  
          }).then(res => {
              
               this.loading = false;
               this.total = res.total;
               this.data= res.rows;
          })
      }
    }
 }
</script>
<style  scoped>
.qtlist {
        width:100%;
        height: 100%;
}
.qtlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
 
}
.filter-input {
  width: 200px;
  display: inline-block;
}

</style>